<template>
  <div class="w-[100%] h-[100%] ">
    <transition v-if="page == 'index'">
      <Index @execute="handleBtnClick"/>
    </transition>
    <transition v-if="page == 'pay'">
      <Pay :selectedPackage="selectedPackage" :orderInfo="orderInfo"/>
    </transition>

  </div>
</template>
<script setup lang="ts">
import Index from "./components/index.vue"
import Pay from "./components/pay.vue"
import {throttle} from "@/utils";
import {FeeApi} from "@/api/fee";
import dayjs from "dayjs";

import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";

const payType = getStrDictOptions(DICT_TYPE.PAY_TYPE);
const businessType = getStrDictOptions(DICT_TYPE.BUSINESS_TYPE);

const page = ref("index")

const selectedPackage = ref({})

const orderInfo = ref({
  payOrderId: 0,
  id: 0,
  no: ""
})

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  payNow: throttle(async (e) => {

    //BUSINESS 2.续费，1.账户充值，3.订单费用扣减，4.物流查询扣费，5.账户扣减，6.短信消耗扣费,7.套餐购买,8.流量24小时扣费
    //TODO 后续用字典表

    //类型1.流量 ，2.充值金额，3.席位，4.短信，5.物流,6.套餐

    let res = await FeeApi.generateOrder({
      types: payType.find(at => at.label == '套餐')?.value,
      tenantPackageId: e.package.id,// e.package.dataPackageId,
      business: businessType.find(at => at.label == '套餐购买')?.value,
      seat: e.package.packageCount || 0,
      price: Math.round((e.package.discountPrice || 0) * 100),
      name: e.package.name,
      duration: e.package.limitedDuration,
      expireDate: dayjs().add(e.package.limitedDuration, 'month').format('YYYY-MM-DD HH:mm:ss')
    })
    orderInfo.value = res;
    selectedPackage.value = e.package;
    page.value = "pay"
  }, 1000)
}

const back = () => {
  page.value = "index"
}

provide('back', back);
</script>

